<template>
  <el-cascader
    :options="treeData"
    :props="props"
    @change="changeValue"
    separator="-"
    size="mini"
  >
  </el-cascader>
</template>

<script>
import { getDepartment } from "@/api/department";
import { transListToTreeData } from "@/utils/index";
export default {
  props: {
    value: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      treeData: [],
      props: {
        //通过props控制要显示的字段
        label: "name",
        value: "id",
      },
    };
  },
  created() {
    this.getDepartment();
  },
  methods: {
    async getDepartment() {
      this.treeData = transListToTreeData(await getDepartment(), 0);
    },
    changeValue(list) {
      //返回数组的最后一位就是点击的部门id
      if (list.length > 0) {
        this.$emit("input", list[list.length - 1]);
      } else {
        this.$emit("input", null);
      }
    },
  },
};
</script>

<style>
</style>